import React, { Component,Fragment } from 'react';
import { Layout, Menu, Button, Tooltip } from 'antd';
import { connect, useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { HomeOutlined, BellOutlined, CheckOutlined } from '@ant-design/icons';
import './index.css';
import 'antd/dist/antd.css';
const { Header } = Layout;

const Head = () => {
    const dispatch = useDispatch();
    const roomList = useSelector((state)=>{
        return state.app.roomList;
    })
    const menuList = useSelector((state) => {
        return state.header.menuList;
    })
    const bells = useSelector((state) => {
        return state.app.bells;
    })
    const bellShow = () => {
        const action = {
            type: 'SHOW_BELL'
        }
        dispatch(action);
    }
    const save = ()=>{
        fetch('http://49.233.20.202:3001/Room/Update',{
            method:'POST',
            body:JSON.stringify({
                roomList:roomList
            }),
            headers:{'Content-Type':'application/json'}
        })
        alert('保存成功');
    }
    return (
        <Fragment>
            <Header>
                <Link to='/'>
                    <HomeOutlined className="logo" />
                </Link>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    // defaultSelectedKeys={['room']}
                    items={menuList.map((item) => {
                        return {
                            key: `${item.key}`,
                            label: item.label
                        };
                    })}
                    style={{ fontSize: '17px', color: 'white' }}
                />
                <Tooltip title="search">
                    <Button
                        className='header-remind-button'
                        shape='circle'
                        type='primary'
                        size='large'
                        icon={<BellOutlined className='bell' />}
                        onClick={bellShow}
                    >
                    </Button>
                </Tooltip>
                {bells ? <div className='header-reminds'>
                    <span>{bells}</span>
                </div> : ''}
                <Button
                    className='header-save-button'
                    shape='circle'
                    type='primary'
                    size='large'
                    icon={<CheckOutlined className="header-save-icon" />}
                    onClick={save}
                >
                </Button>
            </Header>
        </Fragment>
    )
}

// class Head extends Component {
//     constructor(props) {
//         super(props);
//     }
//     render() {
//         const { menuList,bells } = this.props;
//         return (
//             <Header>
//                 <Link to='/'>
//                     <HomeOutlined className="logo" />
//                 </Link>
//                 <Menu
//                     theme="dark"
//                     mode="horizontal"
//                     // defaultSelectedKeys={['room']}
//                     items={menuList.map((item) => {
//                         return {
//                             key: `${item.key}`,
//                             label: item.label
//                         };
//                     })}
//                     style={{fontSize:'17px',color:'white'}}
//                 />
//                 <Tooltip title="search">
//                     <Button 
//                         className='header-button'
//                         shape='circle' 
//                         type='primary'
//                         size='large'
//                         icon={<BellOutlined className='bell'/>}
//                         onClick={this.props.bellShow}
//                     >
//                     </Button>
//                 </Tooltip>
//                 {bells?<div className='header-reminds'>
//                     <span>{bells}</span>
//                 </div>:''}
//             </Header>
//         )
//     }
// }
const mapStateToProps = (state) => ({
    roomList: state.app.roomList,
    menuList: state.header.menuList,
    bells: state.app.bells
})
const mapDispatchToProps = (dispatch) => ({
    bellShow() {
        const action = {
            type: 'SHOW_BELL'
        }
        dispatch(action);
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(Head);